<script setup>
import { ref, onMounted } from 'vue'
import myAxios from '../../../../plugins/myAxios'
import {ElMessage, ElMessageBox} from "element-plus";

// 搜索条件
const searchForm = ref({
  subject: '',
  chapter: '',
  questionType: '',
  questionCategory: ''
})

// 答题记录列表
const recordList = ref([])

// 科目选项
const subjectOptions = ref([])
// 章节选项
const chapterOptions = ref([])

// 添加分页相关变量
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 添加题目类型选项
const questionTypeOptions = ref([
  { label: '选择题', value: 1 },
  { label: '综合题', value: 2 }
])

// 添加题目分类选项
const questionCategoryOptions = ref([
  { label: '普通题', value: 1 },
  { label: '真题', value: 2 }
])

// 添加详情对话框相关变量
const dialogVisible = ref(false)
const currentRecord = ref(null)

// 获取答题记录列表
const getRecordList = async () => {
  try {
    const res = await myAxios.get('/student/question/record/error/page', {
      params:{
        chapterId: searchForm.value.chapter,
        questionType: searchForm.value.questionType,
        questionCategory: searchForm.value.questionCategory,
        current: currentPage.value,
        pageSize: pageSize.value
      }
    })
    recordList.value = res.records
    total.value = res.total
  } catch (error) {
    ElMessage.error('获取答题记录失败：' + error)
  }
}

// 添加分页改变事件处理器
const handleCurrentChange = (val) => {
  currentPage.value = val
  getRecordList()
}

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
  getRecordList()
}

// 获取科目列表
const getSubjects = async () => {
  try {
    const res = await myAxios.get('/teacher/researchInfo/subject/list')
    subjectOptions.value = res
  } catch (error) {
    ElMessage.error('获取科目列表失败：' + error)
  }
}

// 添加获取章节列表的方法
const getChapters = async (subjectId) => {
  try {
    const res = await myAxios.get('/teacher/researchInfo/chapter/list', {
      params: { subjectId }
    })
    chapterOptions.value = res
  } catch (error) {
    ElMessage.error('获取章节列表失败：' + error)
  }
}

// 添加科目选择变化的监听器
const handleSubjectChange = (subjectId) => {
  searchForm.value.chapter = '' // 重置章节选择
  if (subjectId) {
    getChapters(subjectId)
  } else {
    chapterOptions.value = [] // 清空章节选项
  }
}

// 查看详情方法
const viewDetail = (row) => {
  currentRecord.value = row
  dialogVisible.value = true
}

// 添加删除记录方法
const deleteRecord = async (id) => {
  try {
    await ElMessageBox.confirm('确定要删除这条答题记录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    await myAxios.post(`/student/question/record/delete/${id}`)
    ElMessage.success('删除成功')
    getRecordList() // 重新加载列表
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败：' + error)
    }
  }
}

onMounted(() => {
  getSubjects()
  getRecordList()
})
</script>

<template>
  <div class="answer-record-container">
    <!-- 搜索区域 -->
    <div class="search-area">
      <el-form :model="searchForm" inline>
        <el-form-item label="科目" style="width: 180px;">
          <el-select
              v-model="searchForm.subject"
              placeholder="请选择科目"
              clearable
              @change="handleSubjectChange"
          >
            <el-option
                v-for="item in subjectOptions"
                :key="item.id"
                :label="item.subjectName"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="章节" style="width: 180px;">
          <el-select v-model="searchForm.chapter" placeholder="请选择章节" clearable>
            <el-option
                v-for="item in chapterOptions"
                :key="item.id"
                :label="item.chapterName"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="题目类型" style="width: 180px;">
          <el-select
              v-model="searchForm.questionType"
              placeholder="请选择题目类型"
              clearable
          >
            <el-option
                v-for="item in questionTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="题目分类" style="width: 180px;">
          <el-select
              v-model="searchForm.questionCategory"
              placeholder="请选择题目分类"
              clearable
          >
            <el-option
                v-for="item in questionCategoryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getRecordList">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 列表区域 -->
    <div class="list-area">
      <el-table :data="recordList" border stripe>
        <el-table-column prop="question.subjectName" label="科目" />
        <el-table-column prop="question.chapterName" label="章节" />
        <el-table-column label="题目类型">
          <template #default="scope">
            {{ scope.row.question.questionType === 1 ? '选择题' : '综合题' }}
          </template>
        </el-table-column>
        <el-table-column label="题目分类">
          <template #default="scope">
            {{ scope.row.question.questionCategory === 1 ? '普通题' : '真题' }}
          </template>
        </el-table-column>
        <el-table-column prop="question.content" label="题目内容" show-overflow-tooltip />
        <el-table-column label="题目选项" show-overflow-tooltip>
          <template #default="scope">
            <div v-if="scope.row.question.questionType === 1">
              A: {{ scope.row.question.optionA }}<br>
              B: {{ scope.row.question.optionB }}<br>
              C: {{ scope.row.question.optionC }}<br>
              D: {{ scope.row.question.optionD }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="answerContent" label="我的答案" />
        <el-table-column prop="question.answer" label="正确答案" />

        <el-table-column prop="answerTime" label="答题时间" />
        <el-table-column label="操作" width="180">
          <template #default="scope">
            <el-button type="primary" link @click="viewDetail(scope.row)">
              查看详情
            </el-button>
            <el-button type="danger" link @click="deleteRecord(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加分页组件 -->
      <div class="pagination-container">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes, prev, pager, next"
        />
      </div>
    </div>

    <!-- 添加详情对话框 -->
    <el-dialog
        v-model="dialogVisible"
        title="答题详情"
        width="60%"
    >
      <template v-if="currentRecord">
        <div class="detail-content">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="科目">
              {{ currentRecord.question.subjectName }}
            </el-descriptions-item>
            <el-descriptions-item label="章节">
              {{ currentRecord.question.chapterName }}
            </el-descriptions-item>
            <el-descriptions-item label="题目标题" :span="2">
              {{ currentRecord.question.title }}
            </el-descriptions-item>
            <el-descriptions-item label="题目类型">
              {{ currentRecord.question.questionType === 1 ? '选择题' : '综合题' }}
            </el-descriptions-item>
            <el-descriptions-item label="题目分类">
              {{ currentRecord.question.questionCategory === 1 ? '普通题' : '真题' }}
            </el-descriptions-item>
            <el-descriptions-item label="题目内容" :span="2">
              {{ currentRecord.question.content }}
            </el-descriptions-item>
            <el-descriptions-item v-if="currentRecord.question.questionType === 1" label="题目选项" :span="2">
              <div>A: {{ currentRecord.question.optionA }}</div>
              <div>B: {{ currentRecord.question.optionB }}</div>
              <div>C: {{ currentRecord.question.optionC }}</div>
              <div>D: {{ currentRecord.question.optionD }}</div>
            </el-descriptions-item>
            <el-descriptions-item label="我的答案" :span="2">
              {{ currentRecord.answerContent }}
            </el-descriptions-item>
            <el-descriptions-item label="正确答案" :span="2">
              {{ currentRecord.question.answer }}
            </el-descriptions-item>
            <el-descriptions-item label="答题结果">
              <el-tag :type="currentRecord.isCorrect === null ? 'info' : (currentRecord.isCorrect ? 'success' : 'danger')">
                {{ currentRecord.isCorrect === null ? '未批改' : (currentRecord.isCorrect ? '正确' : '错误') }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="答题时间">
              {{ currentRecord.answerTime }}
            </el-descriptions-item>
            <el-descriptions-item label="题目解析" :span="2">
              {{ currentRecord.question.analysis }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
.answer-record-container {
  padding: 20px;

  .search-area {
    margin-bottom: 20px;
    background: #fff;
    padding: 20px;
    border-radius: 4px;
  }

  .list-area {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
  }

  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

  .detail-content {
    padding: 20px;

    :deep(.el-descriptions__label) {
      width: 120px;
    }
  }
}
</style>
